<template>
  <div class="container">
    <div class="row">
      <div class="col-12">
        <p class="display-3">Vue Crash course</p>
      </div>
    </div>
    <div class="row">
      <p>Add create form</p>
    </div>
    <div class="row">
      <div class="col-12 col-lg-6">
        <ul class="list-group">
          <!-- <li v-for="(todo,index) in todos" :key="index">{{todo.todoString}}</li> -->
          <Todo
            v-for="(todo,index) in todos"
            :key="index"
            :todoString="todo.todoString"
            :completed="todo.completed"
          />
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Todo from "./Todo";
export default {
  components: {
    Todo,
  },
  data() {
    return {
      todos: [
        { todoString: "Study Vue", completed: false },
        { todoString: "Study Design", completed: true },
        { todoString: "Reading Book", completed: false },
        { todoString: "Writting some code", completed: false },
      ],
    };
  },
  methods: {
    addTodo(newTodo) {
      this.todos.pubsh({ todoString: newTodo, completed: false });
    },
    toggleTode(todo) {
      todo.completed = !todo.completed;
    },
    editTodo(todo, newTodoString) {
      todo.todoString = newTodoString;
    },
    deleteTodo(deleteTodo) {
      this.todos = this.todos.filter((todo) => todo !== deleteTodo);
    },
  },
};
</script>

<style>
</style>